<template>
    <!-- <div class="org-show-box" :style="{transform:scale(1)}"> -->

    <div class="org-show-box">
        <div class="org-chart-container" :style="{width:setWidth}" >
            <div class="org-chart-node-children">
                <OrgChartNode v-for="(node, index) in treeData" :key="index" :node="node" @goUpClick="goUpClick" @goUpDrop="goUpDrop"/>
            </div>
        </div>
    </div>
</template>

<script>
import OrgChartNode from './orgChartNode'

export default {
    name: 'OrgChart',
    components: {
        OrgChartNode
    },
    props: {
        setWidth: String,
        setZoom: Number,
        data: {
            required: true
        }
    },
    data() {
        const treeNodes = this.getChildren(this.data, null)

        return {
            treeData: this.data
        }
    },
    mounted() {
        var theOrgbox = document.getElementsByClassName('org-chart-node-children')
        console.log(theOrgbox[0].clientWidth, 'theOrgbox')
    },
    methods: {
        goUpClick: function(event) {
            this.$emit('onClick', event)
        },
        goUpDrop: function(event) {
            this.$emit('onDrop', event)
        },
        getChildren: function(nodes, parentId) {
            let result = []
            console.log(nodes, 'nodes...')
            for (const i in nodes) {
                const node = nodes[i]
                result.push({
                    id: node.id,
                    parentId: parentId,
                    label: node.label
                    // id:node.id,
                    // label:node.label,
                    // list:node.list,
                    // type:node.type,

                })
                result = result.concat(this.getChildren(node.children, node.id))
            }
            return result
        }
    }
}
</script>

<style scoped>
  .org-show-box{
      position:relative;
      float:left;
      width:100%;
      height:100%;
      overflow-y:scroll;

  }
  .org-chart-container {

    position:relative;
    float:left;
    /* width:auto; */
    height:750px;
    text-align: center;
    /*
    width: 2000px;
    height:200px;
    border:1px solid red  */
  }

  .org-chart-node-children .org-chart-node-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    width: 0;
    height: 20px;
  }
  .org-chart-node-children:first-child{

      position:relative;
      float:left;
  }

</style>
